<script>
  import sheep from '@/sheep';
  //// #ifdef MP-WEIXIN
  import RecursiveLists from '@/pages/genealogy/components/RecursiveLists.vue';
  // // #endif
  // // #ifndef MP-WEIXIN
  // import { defineAsyncComponent } from 'vue'
  // // #endif

  export default {
    data() {
      return {
        currentWidth: 0,
      };
    },
    name: 'characterCard',
    props: {
      info: {
        type: Object,
        default: () => {
          return {
            name: '父亲',
          };
        },
      },
      isOwnFlag: {
        type: Boolean,
        default: false,
      },
      isTopLevel: {
        type: Boolean,
        default: false,
      },
      index: {
        type: Number,
        default: 0,
      },
      length: {
        type: Number,
        default: 0,
      },
      is_init: 0,
      is_create: 0,
      generation: 0,
      id: 0,
      listWidth: 0,
    },
    computed: {
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    mounted() {
      if (this.info.gxval == -1) {
        this.getPosition('male');
      } else if (this.info.spouse_val) {
        if (this.info.spouse_val.gxval == -1) {
          this.getPosition('female');
        }
      }
      this.changeState();
    },
    watch: {
      info: {
        deep: true,
        handler(newValue, oldValue) {
          this.changeState();
        },
      },
      listWidth: {
        deep: true,
        handler(newValue, oldValue) {
          uni.$emit('changeWidth');
        },
      },
    },
    methods: {
      addMember(info) {
        this.$emit('addMember', info);
      },
      // 查询元素位置
      getPosition(id) {
        console.log('选择的id', id);
        this.$nextTick(() => {
          // setTimeout(() => {
          const query = uni.createSelectorQuery().in(this);
          query.select(`#${id}`).boundingClientRect(res => {
            console.log(res, '获取的本人');
            uni.$emit('setCoordinate', { info: res, memberInfo: this.info });
          }).exec();
          // }, 100);
        });
      },
      openAddPersonnelPopup(info) {
        this.$emit('openAddPersonnelPopup', info);
      },
      changeState() {
        let that = this;
        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this);
          query.select('#listBollit').boundingClientRect(res => {
            that.currentWidth = res.width;
            this.$emit('getListInfo', res);
            uni.$emit('changeWidth');
          }).exec();
        });
      },
      changeWidth() {
        this.$emit('setWidth');
        this.changeState();
        uni.$emit('changeWidth');
      },
    },
  };
</script>

<template>
  <view id="listBollit"
        class="flex align-start justify-center"
        style="position: relative;margin: 0 10rpx"
        :style="{
          marginBottom: isTopLevel ? '4rpx' : !!info.children && info.children.length > 0 ? '10rpx':'0',
          width:  'auto',
        }"
  >
    <view v-if="!isTopLevel && length > 1 && index != length - 1"
          class="isTopLevel"
          :style="{
            width: index == 0 && !!info.spouse_val && !info.isHave ? 'calc(100% - 50rpx)' : length - 1 == index && !!info.spouse_val && !info.isHave ? '10%' :  index == 0 || length - 1 == index ? '50%' : '100%',
          }"
          :class="{
            isTopLevelLeft: index == 0,
            isTopLevelRight: length - 1 == index,
          }"
    ></view>
    <view v-else-if="!isTopLevel && length <= 1 && !!info.spouse_val && !info.isHave"
          class="isTopLevel"
          :style="{
            width: !!info.spouse_val && !info.isHave ? 'calc(50% - 54rpx)' : '0%',
            left:'54rpx'
          }"
    ></view>


    <view style="position: relative">
      <view v-if="!isTopLevel && length > 1"
            class="isTopLevel"
            :style="{
              width: '50%',
            }"
            :class="{
              isTopLevelLeft: index == 0,
              isTopLevelRight: length - 1 == index,
            }"
      ></view>
      <view v-if="!isTopLevel"
            class="childrens"
            :style="{
              left: '50%',
            }"
      ></view>
      <view v-if="index == 0 && !!info.spouse_val && !info.isHave"
            style="position: absolute;background: #F5F5F5;top: 0;left: -50rpx;width: 100rpx;height: 6rpx;z-index:5;"
      >
      </view>
      <view v-if="length - 1 == index && !isTopLevel && length > 1"
            style="position: absolute;background: #F5F5F5;top: -2rpx;right: -52rpx;width: 100rpx;height: 16rpx;z-index:5;"
      >
      </view>
      <view id="male"
            class="characterCard flex flex-column align-center z_10"
            :style="{
            background: isOwnFlag ? '#6EA0FC' : info.sex == 1 ? '#6EA0FC' : '#FC6F6F',
            marginRight:!!info.spouse_val && !info.isHave ?'5.625rpx':'0'
          }"
            :class="{
            cardClass:isOwnFlag,
            'items-center':isOwnFlag,
            'justify-center':isOwnFlag
          }"
            @click.stop="addMember(info)"
      >
        <template v-if="isOwnFlag">
          <view class="title">点击</view>
          <!--        <view class="name">张大旭旭</view>-->
          <view class="title">添加</view>
        </template>
        <template v-else>
          <view class="avatar">
            <image :src="info.head" class="avatar_image"></image>
          </view>
          <view class="remark flex align-center justify-center"
                style="margin-top: 3.75rpx;"
          >
            <view>{{ info.surname || '' }}{{ info.name || '' }}</view>
            <view class="guanxi flex align-center justify-center" v-if="is_init == 1 && is_create == 1">
              {{ info.gxname }}
            </view>
          </view>
        </template>
      </view>
      <view :class="{
              children:!!info.children && info.children.length > 0,
            }"
            :style="{
              top: isTopLevel ? '49%' : '49%',
              left:!!info.children && info.children.length > 0 && info.spouse_val.length == 1 ? '100%' : '50%',
              height:isTopLevel ? 'calc(56% + 2rpx)' : 'calc(58% + 2rpx)'
            }"
      ></view>
    </view>
    <view v-for="(item,index) in info.spouse_val"
          :key="index"
          class="flex flex-column align-center"
          style="position: relative"
    >
      <view class="wifeClass"
            v-if="!!info.spouse_val && !info.isHave"
            :style="{
              width:info.spouse_val.length - 1 == index ? '50%' : '100%'
            }"
      ></view>
      <view style="position: relative">
        <view id="female" v-if="!!info.spouse_val && !info.isHave"
              class="characterCard flex flex-column align-center z_10"
              :style="{
                background: isOwnFlag ? '#6EA0FC' : item.sex == 1 ? '#6EA0FC' : '#FC6F6F',
                marginLeft:'5.625rpx'
              }"
              :class="{
                cardClass:isOwnFlag,
                'items-center':isOwnFlag,
                'justify-center':isOwnFlag
              }"
              @click.stop="addMember(item)"
        >
          <template v-if="isOwnFlag">
            <view class="title">点击</view>
            <!--        <view class="name">张大旭旭</view>-->
            <view class="title">添加</view>
          </template>
          <template v-else>
            <view class="avatar">
              <image :src="item.head.indexOf('http')!= -1 ? item.head : `${nc_image}${item.head}`"
                     class="avatar_image"
              ></image>
            </view>
            <view class="remark flex align-center justify-center" style="margin-top: 3.75rpx;">
              <view>{{ item.surname || '' }}{{ item.name || '' }}</view>
              <view class="guanxi flex align-center justify-center" v-if="is_init == 1 && is_create == 1">
                {{ item.gxname }}
              </view>
            </view>
          </template>
        </view>
        <view v-if="!!item.children && item.children.length > 0"
              :class="{
              children_value:!!item.children && item.children.length > 0,
            }"
              :style="{
              top: isTopLevel ? '97%' : '97%',
            }"
        ></view>
      </view>
      <view v-if="!!item.children && item.children.length > 0" style="margin-top: 15rpx;">
        <RecursiveLists :children="item.children" v-if="!!item.children && item.children.length > 0" :id="id"
                        :is_create="is_create" :is_init="is_init"
                        :generation="generation + 1"
                        @openAddPersonnelPopup="openAddPersonnelPopup"
                        @changeWidth="changeWidth"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">

  .cardClass {
    width: 100rpx !important;
    height: 260rpx !important;
    background: #6EA0FC !important;
    border-radius: 10rpx 10rpx 10rpx 10rpx !important;
    position: relative;
  }

  .characterCard {
    margin-top: 15rpx;
    width: 100rpx;
    height: 260rpx;
    background: #FC6F6F;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
    position: relative;
  }

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 11.25rpx;
    color: #FFFFFF;
  }

  .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 9.75rpx;
    color: #FFFFFF;
  }

  .avatar {
    width: 100rpx;
    height: 100rpx;
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
    overflow: hidden;

    .avatar_image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .remark {
    width: 32rpx;
    height: 144rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 32rpx;
    color: #FFFFFF;
    word-break: break-all;
    position: relative;
  }

  .children {
    width: 4rpx;
    height: calc(58% + 2rpx);
    background: #707070;
    position: absolute;
    top: 65.25rpx;
    left: 50%;
    transform: translateX(-50%);
    line-height: 24rpx;
  }

  .wifeClass {
    position: absolute;
    left: -20rpx;
    top: 132rpx;
    //transform: translateY(-50%);
    width: 50%;
    height: 4rpx;
    background: #707070;
  }

  .isTopLevel {
    width: 100%;
    height: 4rpx;
    background: #707070;
    position: absolute;
    top: 0;
  }

  .isTopLevelLeft {
    right: 0;
  }

  .isTopLevelRight {
    left: 0;
  }

  .childrens {
    position: absolute;
    width: 4rpx;
    height: 72rpx;
    top: -0%;
    left: 50%;
    transform: translateX(-50%);
    background: #707070;
  }

  .guanxi {
    width: 20rpx;
    height: 90rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20rpx;
    line-height: 24rpx;
    color: #FFFFFF;
    position: absolute;
    left: -25rpx;
    top: 50%;
    transform: translateY(-50%);
    //overflow: hidden;
  }

  .children_value {
    width: 4rpx;
    height: 10%;
    background: #707070;
    position: absolute;
    top: 65.25rpx;
    left: 50%;
    transform: translateX(-50%);
    line-height: 24rpx;
  }
</style>